import React, { CSSProperties } from 'react'
interface Props {
  count: number
  maxCount?: number
  style?: CSSProperties
}
const PREFIX = 'gzwStatus'
class Status extends React.Component<Props, any> {
  constructor(props: Props) {
    super(props)
  }
  getClassName(className:string = '') {
    return `${PREFIX}${className}`
  }
  getInitClassName(className: string) {
    const { count } = this.props
    let str = className
    if (count > 0) {
      str += ' add'
    } else if (count < 0) {
      str += ' del'
    } else {
      str += ''
    }
    return this.getClassName(str)
  }
  render() {
    const { count, style, maxCount = 10 } = this.props
    return (
      <div className={this.getClassName()} style={ style }>
        <div className={this.getInitClassName('Bg')} style={{ width: `${(Math.abs(count) * 100) / maxCount}%` }}></div>
        <div className={this.getInitClassName('Wrapper')}>
          {count}%
        </div>
      </div>
    )
  }
}
export default Status
